<template>
	<!-- 20230306 用于下单页 订单列表页 订单详情页等订单的产品 -->
	<view class="mall-order-product-cn">
		<!-- 组件内容 -->
		<view class="cn-content">
			<view class="padding-tb-10">
				<!-- 产品列表 -->
				<view class="padding-tb-10" v-for="(item,index) in list" :key="index">
					<!-- 产品展示 -->
					<view class="flex align-center" @click="goDetail(item.product_id)">
						<!-- 图片 -->
						<image class="jc-image-180 radius-10" :src="item.product_cover_img" mode="aspectFill"></image>

						<!-- 产品信息 -->
						<view class="margin-left-20 flex-one">
							<!-- 名称 -->
							<view class="line-height-40 text-28 text-cut-one">
								{{item.product_name}}
							</view>

							<!-- 规格 -->
							<view class="margin-top-5 line-36 height-72 text-cut-two text-24 text-aa">
								{{item.product_sku_name}}
							</view>

							<!-- 价钱 -->
							<view class="margin-top-25 flex align-center justify-between">
								<view class="line-height-35"
									:class="isPriceHighlight ? 'text-30 text-main' : 'text-28 text-77'">
									{{item.product_price ? '¥' + item.product_price : ''}}
								</view>
								<text class="text-24 text-4d">
									x{{item.number}}
								</text>
							</view>
						</view>
					</view>

					<!-- 退款 -->
					<view class="flex align-center justify-end" v-if="isShowRefund">
						<view class="text-26 text-aa" v-if="item.is_has_refund > 0"
							@tap.stop="go('/pages/mall/my/orderProductRefundList?id='+item.id)">
							退款记录
						</view>
						
						<!-- 退款按钮 -->
						<view class="margin-tb-20 btn-60-cc" v-if="isCanRefund && item.refund_status == 1"
							@tap.stop="go('/pages/mall/my/refund?id='+item.id)">退款</view>
						<view class="margin-tb-20 btn-60-cc" v-if="item.refund_status == 2">退款中</view>
						<view class="margin-tb-20 btn-60-cc" v-if="item.refund_status == 3">已退款</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 组件浮层 -->
		<view class="cn-layer">

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 产品列表
			list: {
				type: Array,
				default: []
			},
			// 点击产品是否可以跳转详情
			isCanGoDetail: {
				type: Boolean,
				default: false
			},
			// 价格是否高亮
			isPriceHighlight: {
				type: Boolean,
				default: false
			},
			// 是否展示退款状态
			isShowRefund: {
				type: Boolean,
				default: false
			},
			// 是否可以申请退款
			isCanRefund: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			}
		},
		methods: {
			/**
			 * 跳转详情
			 * @date 2023-03-06
			 */
			goDetail(productId) {
				if (this.isCanGoDetail) {
					uni.navigateTo({
						url: '/pages/mall/detail?id=' + productId
					})
				}
			},
		}
	}
</script>

<style scoped>

</style>